<template>
	<view
		class="v-safe-bottom"
		:style="[style]"
		:class="[!isNvue && 'v-safe-area-inset-bottom']"
	>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
/**
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <v-status-bar></v-status-bar>
 */
export default {
	name: "v-safe-bottom",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			safeAreaBottomHeight: 0,
			isNvue: false,
		};
	},
	computed: {
		style() {
			const style = {};
			// #ifdef APP-NVUE || MP-TOUTIAO
			// nvue下，高度使用js计算填充
			style.height = uni.$u.addUnit(
				uni.$u.sys().safeAreaInsets.bottom,
				"px"
			);
			// #endif
			return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
		},
	},
	mounted() {
		// #ifdef APP-NVUE
		// 标识为是否nvue
		this.isNvue = true;
		// #endif
	},
};
</script>

<style lang="scss" scoped>
.v-safe-bottom {
	/* #ifndef APP-NVUE */
	width: 100%;
	/* #endif */
}
</style>
